<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!--删除苹果默认的工具栏和菜单栏，默认为no显示工具栏和菜单栏。-->

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!--QQ强制全屏-->

    <meta name="x5-fullscreen" content="true">

    <!--UC强制全屏-->

    <meta name="fullscreen" content="yes">
    <link href="./css/reset.css" rel="stylesheet" />
    <link href="./css/common.css" rel="stylesheet" />


    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <style>

    </style>
    <title>榜单</title>
</head>

<body>
    <header class="s-header">
        <div class="s-logo">
            <img src="./img/logo.png" alt="">
        </div>
        <div class="s-box">
            <span></span>
            <p>搜索用户</p>
        </div>
        <div class="s-user">
            <img src="./img/avator.png" alt="">
            <span class="s-user-info"></span>
        </div>
    </header>


    <div id="content">

    </div>

    <!-- 底部导航 -->
    <div id="menu" class="menu">
        <div id="one" class="subMenu text-center" data-url="/rank_list.html">
            <img class="menu_img" src="./img/i-home.png" data-url="1">
            <div class="menu_name">首页</div>
        </div>
        <div id="two" class="subMenu text-center" data-url="/rank_list.html">
            <img class="menu_img" src="./img/i-news.png" data-url="">
            <div class="menu_name">新闻</div>
        </div>
        <div id="three" class="subMenu text-center" data-url="/rank_list.html">
            <img class="menu_img" src="./img/i-video.png" data-url="">
            <div class="menu_name">视频</div>
        </div>
        <div id="four" class="subMenu text-center" data-url="/rank_list.html">
            <img class="menu_img" src="./img/i-preferential.png" data-url="">
            <div class="menu_name">优惠</div>
        </div>
        <div id="five" class="subMenu text-center" data-url="/rank_list.html">
            <img class="menu_img" src="./img/i-me.png" data-url="">
            <div class="menu_name">我的</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="./js/common.js"></script>

<script src="./js/jquery.min.js"></script>

<script>
    $(function() {
        var height = $(window).height() - $("header").height() - $("#description").height() - $("#menu").height();
        $("#content").height(height + "px");
        //点击事件
        $("#menu .subMenu").click(function() {
            //content根据点击按钮加载不同的html
            var url = $(this).attr("data-url");
            console.log(url)
            if (url) {
                $("#content").load(url)
            }
        });
    })
</script>

</html>